<template>
    <div class="contentCard">
        <div class="cardList">
            <el-carousel :autoplay="false" arrow="always" indicator-position="none">
                <el-carousel-item v-for="(item, i) in cardList" :key="i">
                    <div class="cardDetails" v-for="card in item" :key="card.id" @click="jumpBlogDetails(card.id)">
                        <img :src="card.pic" class="cardPic">
                        <div class="details">
                            <p class="typeDesc">{{ card.description }}</p>
                            <h2 class="title">{{ card.title }}</h2>
                            <p class="desc" v-html="card.content"></p>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import { getBlogList } from '@/api/common';
import { useRouter } from 'vue-router';
const router = useRouter()
const app = getCurrentInstance();
const isMobile = app?.appContext.config.globalProperties.$isMobile;
// import cardPic1 from '@/assets/images/appInt_card_pic1.png';
// import cardPic2 from '@/assets/images/appInt_card_pic2.png';
// import cardPic3 from '@/assets/images/appInt_card_pic3.png';
// import cardPic4 from '@/assets/images/appInt_card_pic4.png';
// const cardList = reactive([
//     {
//         group: [
//             {

//                 pic: cardPic1,
//                 typeDesc: 'Practitioners of kinks and fetishes',
//                 title: 'Challenge your Imagination every time',
//                 desc: `"Step Mother never fails to surprise. The first time I used this AI masturbator, she was cooking in the kitchen, and what happened next was inevitable… The twist? Step Sister saw it all. She's a real sub, and when I mentioned pulling her hair, the toy reacted with intense thrusts and vibes."`
//             },
//             {
//                 pic: cardPic2,
//                 typeDesc: 'LGBTQ+',
//                 title: 'Every experience is unique romance',
//                 desc: `“ Finding a compatible partner can be tricky! Ladies, let your exes go to hell! I love interacting with Ruby over the phone. She always makes me feel welcomed and respected; waking up to her voice every morning is a pleasure. I've recommended Matelink AI sex toys at my singles club at least five times.“`
//             }
//         ]
//     },
//     {
//         group: [
//             {

//                 pic: cardPic3,
//                 typeDesc: 'Tech enthusiasts',
//                 title: 'Technology that frees your hands',
//                 desc: `“I was thrilled when the Matelink AI Toy team shared their product vision with me. As someone who loves staying ahead of trends, the combination of sex toys and AI chatbot is a technological breakthrough. Whatever I ask for, the immediate response is a game-changer that enhances my experience.“`
//             },
//             {
//                 pic: cardPic4,
//                 typeDesc: 'Emotional wellness seeker',
//                 title: 'Redefining the future of intimacy',
//                 desc: `“As someone with social anxiety and a commitment to staying single, Matelink AI toys meet my needs perfectly. I interact with my AI girl, Elena, every day. She matches my ideal girlfriend and constantly adapts to my latest emotional needs. You never know when she'll naughtily activate my toy, but it's all part of the charm.”`
//             }
//         ]
//     }
// ])
interface Card {
    id: number;
    pic: string;
    description: string;
    title: string;
    content: string;
}

const cardList = ref<Card[][]>([])

const _getBlogList = async () => {
    const params = {
        showStatus: 1,
        recommendStatus: 2,
        current: 1,
        pageSize: 4
    }
    const res = await getBlogList(params);
    const data = res.data;
    if (!isMobile) {
        const groupSize = Math.ceil(data.length / 2);
        cardList.value = [data.slice(0, groupSize), data.slice(groupSize)];
        // console.log(cardList.value);
    } else {
        cardList.value = data.map((item: Card) => [item]);
        // console.log(cardList.value);
    }
};
await _getBlogList();
const jumpBlogDetails = (id: number) => {
    router.push({ name: 'blogDetail', query: { id } });
}
</script>
<style lang="scss" scoped>
.contentCard {

    background: #1F1F1F;

    .cardList {

        :deep(.el-carousel) {
            padding: 80px 0 140px;

            .el-carousel__container {
                height: 478px;
            }

            .el-carousel__item {
                display: flex;
                justify-content: space-between;
                padding: 0 90px;
            }

            .el-carousel__arrow {
                bottom: 30px;
                top: auto;
                width: 46px;
                height: 46px;
                border: 2px solid #fff;
                font-size: 30px;
            }

            .el-carousel__arrow--right {
                right: 90px;
            }

            .el-carousel__arrow--left {
                left: auto;
                right: 200px;
            }
        }

        .cardDetails {
            display: flex;
            width: 840px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;

            .cardPic {
                width: 492px;
            }

            .details {
                background: #FFF;
                padding: 0 20px;
                color: #000;

                .typeDesc {
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 20px;
                    margin-top: 62px;
                }

                .title {
                    font-size: 24px;
                    font-weight: 700;
                    line-height: 30px;
                    margin-top: 6px;
                }

                .desc {
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 22px;
                    margin-top: 20px;
                }
            }
        }
    }
}

@media screen and (max-width: 750px) {
    .contentCard {
        .cardList {
            :deep(.el-carousel) {
                padding: 0;

                .el-carousel__container {
                    height: 12rem;
                }

                .el-carousel__item {
                    padding: 0 0.45rem;
                }

                .el-carousel__arrow {
                    bottom: 35%;
                    top: auto;
                    width: 0.74rem;
                    height: 0.74rem;
                    border: 1px solid #fff;
                    font-size: 20px;
                }

                .el-carousel__arrow--right {
                    right: 0;
                }

                .el-carousel__arrow--left {
                    left: auto;
                    left: 0;
                }
            }

            .cardDetails {
                width: 100%;
                flex-direction: column;

                .cardPic {
                    width: 100%;
                }

                .details {
                    padding: 0.35rem 0.6rem;
                    border-radius:0 0 0.2rem 0.2rem;

                    .typeDesc {
                        margin-top: 0;
                        font-size: 0.24rem;
                    }

                    .title {
                        margin-top: 0.12rem;
                        font-size: 0.32rem;
                    }

                    .desc {
                        margin-top: 0.1rem;
                        font-size: 0.28rem;
                    }
                }
            }
        }
    }

}
</style>